import React from 'react';
import { observer, inject } from 'mobx-react';
import * as mobx from 'mobx';
import { WeaTop, WeaTab, } from 'ecCom';
import { Button } from 'antd';

import '../../style/analyze.less';

import BaseInfo from "./BaseInfo";
import LinkageInfo from './LinkageInfo';
import FieldChangeInfo from './FieldChange';

@inject('analyzeStore')
@observer
export default class Analyze extends React.Component {
  constructor(props) {
    super(props);
  }


  componentDidMount() {
    const { initDatas } = this.props.analyzeStore;
    initDatas();
  }

  render() {
    const { tabKey, changeTabKey, showSearchAd, setShowSearchAd, dataSource, searchData, searchFlag, changeShowField } = this.props.analyzeStore;
    const topTab = [
      {
        title: "基础信息",
        viewcondition: "1"
      },
      {
        title: "联动信息",
        viewcondition: "2"
      },
      {
        title: "字段变更过程",
        viewcondition: "3"
      }
    ];

    return (
      <div className='wf-analyze'>
        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@f1144k`}
          title='表单智能分析'
          icon={<i className="icon-coms-workflow" />}
          iconBgcolor="#0079DE"
          buttons={this.getTopBtns()}
        />
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@n5m1i3`}
          datas={topTab}
          keyParam="viewcondition" //主键
          selectedKey={tabKey}
          onChange={(v) => changeTabKey(v)}
        />
        {
          tabKey == '1' && < BaseInfo ecId={`${this && this.props && this.props.ecId || ''}_BaseInfo@x6gbpc`} />
        }
        {
          tabKey == '2' && < LinkageInfo ecId={`${this && this.props && this.props.ecId || ''}_LinkageInfo@5sbg33`} />
        }
        {
          tabKey == '3' && < FieldChangeInfo ecId={`${this && this.props && this.props.ecId || ''}_FieldChangeInfo@12xc22`} />
        }
      </div>
    );
  }

  getTopBtns = () => {
    const { tabKey, changeShowMerge, changeShowField, changeOnlyShowlinkage, mergeMark, showFieldID, onlyShowlinkage } = this.props.analyzeStore;
    let btns = [
      tabKey == '2' ? < Button ecId={`${this && this.props && this.props.ecId || ''}_Button@akwmx1@changeShowMerge`} type="primary" onClick={changeShowMerge} > {mergeMark ? "联动信息合并显示" : "联动信息拆分显示"} </Button > : null,
      tabKey == '3' || tabKey == '2' ? < Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jlfcsq@showField`} type="primary" onClick={changeShowField} > {showFieldID ? "按字段名称显示" : "按字段id显示"} </Button > : null,
      tabKey == '3' ? <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@scq1iw@showlinkage`} type="primary" onClick={changeOnlyShowlinkage} >{onlyShowlinkage ? "显示全部变更信息" : "显示联动变更信息"} </Button> : null,
    ];
    return btns;
  }

}